<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind</title>
    <style>
        .textColor {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
        <ul>
            <li v-for="value in data.number">
                {{ value }}
            </li>
        </ul>
        <ul>
            <li v-for="(value, index) in data.number">
                index => {{ index }}&nbsp;&nbsp;&nbsp;&nbsp;value => {{ value }}
            </li>
        </ul>
        <ul>
            <li v-for="(value, key, index) in data.user">
                index => {{ index }}&nbsp;&nbsp;&nbsp;&nbsp;key => {{ key }}&nbsp;&nbsp;&nbsp;&nbsp;value => {{ value }}
            </li>
        </ul>
        <ul>
            <template v-for="(value, key, index) in data.user">
                <li>
                    index => {{ index }}<br />
                    key => {{ key }}<br />
                    value => {{ value }}
                </li>
            </template>
        </ul>
        <ul>
            <li v-for="(t, idx) in data.teacher" :title="t.name" :key="t.id">
                {{ t.id }}<br />
                {{ t.name }}<br />
                {{ t.web }}<br />
            </li>
        </ul>
    </div>

    <script type="module">
        import {createApp, reactive} from './js/vue.esm-browser.js'
        // template 标签可以用来包装多个元素或多行代码，不会在页面中渲染
        // v-bind 
        createApp({
            // setup选项，用于设置响应式数据和方法等 
            setup() {
                // reactive 创建响应式对象，用于存储复杂的数据类型，例如：对象、数组
                const data = reactive({
                    number: ["10", "11", "12"], // 数组
                    user: { // 对象
                        name: "Luna",
                        gender: "女"
                    },
                    teacher: [ // 包含对象的数组
                        { id: 100, name: "Lily", web: "https://www.lily.com" },
                        { id: 101, name: "David", web: "https://www.david.com" }
                    ]
                })

                return {
                    title: "v-bind",
                    data
                }
            }
        }).mount("#app")
    </script>
</body>
</html>